<template>
  <div class="app-container initializeRoll">
    <div class="topDiv" style="padding: 0 20px">
      <p class="title">
        <img
          src="@/assets/img/ckje.png"
          alt
          style="height: 20px; width: 20px"
        />
        <span>查看金额列表</span>
      </p>
      <div>
        <el-table :data="roleList" height="650">
          <el-table-column label="金额" prop="amount" align="center">
            <template slot-scope="scope">
              <span>
                <span v-show="scope.row.moneyType == '3'" style="color: red"
                  >+{{ scope.row.amount || "暂无" }}</span
                >
                <span v-show="scope.row.moneyType == '1'" style="color: Green"
                  >-{{ scope.row.amount || "暂无" }}</span
                >
                <span v-show="scope.row.moneyType == '2'" style="color: Green"
                  >-{{ scope.row.amount || "暂无" }}</span
                >
              </span>
            </template>
          </el-table-column>

          <!-- <el-table-column label="项目名" prop="proName" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.proName || "系统" }}</span>
                </template>
              </el-table-column>
               -->

          <el-table-column label="类型" prop="moneyType" align="center">
            <template slot-scope="scope">
                <span v-show="scope.row.proName == null">
                  <span v-show="scope.row.moneyType == '3'">增加金额</span>
                  <span v-show="scope.row.moneyType == '2'">减少金额</span>
                  <span v-show="scope.row.moneyType == '1'">提现金额</span>
                </span>
                <span v-show="scope.row.proName != null"
                  >{{ scope.row.proName }}_
                  <span v-show="scope.row.moneyType == '3'">增加金额</span>
                  <span v-show="scope.row.moneyType == '2'">减少金额</span>
                  <span v-show="scope.row.moneyType == '1'">提现金额</span>
                </span>
            </template>
          </el-table-column>

          <el-table-column label="时间" prop="time" align="center" />
        </el-table>
      </div>
      <pagination
        style="margin: 0px 0px 50px 0px"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
  </div>
</template>

<script>
import { selectCapUserWalletRecordList } from "@/api/base/index.js";
export default {
  data() {
    return {
      pickerOptions0: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6;
        },
      },
      // 分页总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        // 收入类型
        amountType: "",
      },
      roleList: [],
      userName: "",
    };
  },
  mounted() {
    this.userName = sessionStorage.getItem("userName");
    this.getList();
  },
  methods: {
    async getList() {
      let param = {
        pageNum: this.queryParams.pageNum,
        pageSize: this.queryParams.pageSize,
        userId: this.$route.params.id,
      };
      const data = await selectCapUserWalletRecordList(param);
      console.log(data, "获取列表");
      if (data.code == 200) {
        this.roleList = data.data.list;
        this.total = data.data.total;
      }
    },
  },
};
</script>
<style scoped lang='scss'>
.topDiv {
  overflow: hidden;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
  padding: 20px;
  height: 100vh;
  border-radius: 5px;
  .title {
    height: 50px;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    img {
      height: 30px;
      margin-right: 10px;
    }
  }
  .containers {
    height: 130px;
    // border: 1px red solid;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
    padding: 20px;
  }
}
</style>